import { Form as AntdForm, Input, Button } from 'antd'
import { Form, Field } from 'react-final-form'
import { FormExampleContainer } from '../../components'
export const RecordLevelValidation = () => {
    const onSubmit = () => {
        alert('Submitted')
    }

    const validate = values => {
        const errors = {}
        if (!values.username) {
            errors.username = 'required'
        }
        if (!values.password) {
            errors.password = 'required'
        }
        if (!values.confirm) {
            errors.confirm = 'required'
        }
        if (values.confirm !== values.password) {
            errors.confirm = "Must match with password";
        }
        return errors
    }

    const ruleExecutionResult = (error) => {
        switch (error) {
            case 'required': return {
                validateStatus: !error ? 'success' : 'error',
                help: 'Field is mandatory',
                
            }
            default: return {
                validateStatus: !error ? 'success' : 'error',
                help: error
            }
        }
    }

    return (
        <>
            <FormExampleContainer title={'Record-Level Validation'} description={'An example of a form with synchronous record-level validation created with React Final Form'}>
                <Form onSubmit={onSubmit} validate={validate}>
                    {({ handleSubmit, values }) => (
                        <AntdForm
                            labelCol={{ span: 4, offset: 2 }}
                            wrapperCol={{ span: 9, offset: 1 }}
                            onFinish={handleSubmit}
                        >

                            <Field name='username'>
                                {
                                    ({ input, meta: { error, touched } }) => (
                                        <AntdForm.Item label="Username:" hasFeedback {...(touched ? ruleExecutionResult(error) : {})}>
                                            <Input {...input} placeholder="Username" />
                                        </AntdForm.Item>
                                    )

                                }
                            </Field>

                            <Field name='password'>
                                {
                                    ({ input, meta: { error, touched } }) => (
                                        <AntdForm.Item label="Password:" hasFeedback {...(touched ? ruleExecutionResult(error) : {})}>
                                            <Input {...input} placeholder="Password" />
                                        </AntdForm.Item>
                                    )
                                }
                            </Field>


                            <Field name='confirm'>
                                {
                                    ({ input, meta: { error, touched } } ) => (
                                        <AntdForm.Item label="Confirm:" hasFeedback {...(touched ? ruleExecutionResult(error) : {})}>
                                            <Input {...input} placeholder="Confirm" />
                                        </AntdForm.Item>)
                                }
                            </Field>

                            <AntdForm.Item wrapperCol={{ span: 12, offset: 6 }}>
                                <Button type='primary' htmlType="submit">Submit</Button>
                            </AntdForm.Item>
                            <Input.TextArea disabled value={JSON.stringify(values, 0, 2)} rows={4} />
                        </AntdForm>
                    )}
                </Form>
            </FormExampleContainer>
        </>
    )
}